<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.box{
    display: flex;
    flex-wrap: wrap;
/*    justify-content: space-between;*/
}

.box1{
    display: flex;
    border: 2px solid;
    width: 100px;
    height: 100px;
}

.box2{
    display: flex;
    border: 2px solid;
    width: 100px;
    height: 100px;
    justify-content: center; /*定义item，即span，在主轴上的对齐方式，itme在主轴上移动*/
}

.box3{
    display: flex;
    border: 2px solid;
    width: 100px;
    height: 100px;
    justify-content: center; 
    align-items: center;
}

.box4{
    display: flex;
    flex-direction: column;
    border: 2px solid;
    width: 100px;
    height: 100px;
    justify-content: space-between;
}

.box5{
    display: flex;
    flex-direction: column;
    border: 2px solid;
    width: 100px;
    height: 100px;
    justify-content: space-between;
    align-items: center;
}

.box6{
    display: flex;
    border: 2px solid;
    width: 100px;
    height: 100px;
}

.box7{
    display: flex;
    border: 2px solid;
    width: 100px;
    height: 100px;
    justify-content: space-between;
}


.item{
   border: 1px solid red;
   width: 20px;
   height: 20px;
   border-radius: 50%
}

.item1{
   border: 1px solid red;
   width: 20px;
   height: 20px;
   border-radius: 50%
}

.item2{
   border: 1px solid red;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   align-self: center;
}

.item3{
   border: 1px solid red;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   align-self: flex-end;
}


</style>

</head>

<body class='box'>
    <div class='box1'>
        <span class='item'></span>   
    </div>

    <div class='box2'>
        <span class='item'></span>   
    </div>

    <div class='box3'>
        <span class='item'></span>   
    </div>

     <div class='box4'>
        <span class='item'></span>   
        <span class='item'></span> 
    </div>   

     <div class='box5'>
        <span class='item'></span>   
        <span class='item'></span> 
    </div> 

    <div class='box6'>
        <span class='item1'></span>   
        <span class='item2'></span> 
    </div> 

    <div class='box7'>
        <span class='item1'></span>   
        <span class='item3'></span> 
    </div> 
</body>

</html>